<!-- 
	* 摘要：订单管理
	* 软件名称：雪克码数据管理系统1.0
	* 文件名: tradeManagement.vue
	* 版本：1.0
 -->
<template>
	<div class="sn-common-container">
		<div class="trade-contianer">
			<header>
				<div class="sn-flex sn-row-center hidden-sm-and-down">
					<el-select
					v-model="searchShop"
					collapse-tags
					filterable
					:remote-method="getFillterShopFn"
					:loading="fillterShopLoading"
					remote
					placeholder="请输入客户名称"
					clearable
					 @change="currentChange(1)"
				style="width: 160px;margin-right: 10px;" 
				>
					<el-option v-for="item in fillterShopList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
					<el-input v-model="searchValue" placeholder="名称筛选" style="width: 150px;margin-right: 10px;" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-select v-model="orderStatus" value-key="" style="width: 120px;margin-right: 10px;"  placeholder="订单状态" clearable filterable  @change="currentChange(1)">
						<el-option v-for="item in orderStatusList"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
					<el-button class="sn-btn" style="margin-left: 10px" type="primary" icon="el-icon-plus"
						@click="enterTradeDialog = true">
						新建收货单
					</el-button>
				</div>
				<div class="hidden-sm-and-up">
					<el-input v-model="searchValue" placeholder="名称进行筛选" style="width: 200px" clearable
						@keyup.enter.native="currentChange(1)" />
					<el-button style="margin-left: 4px" type="primary" class="sn-btn" icon="el-icon-search"
						@click="currentChange(1)">
						搜索
					</el-button>
				</div>
			</header>
			<section> 
				<global-table :loading="tableLoading" style="margin-top: 20px;" :pageIndex="currentPage" :pageSize="pageSize" :headerData="initData"
					:data="tabelData" :isFullScreen="false" :operateW="200">
					<template #createdTime="scope">
						<span>{{ $parseTime(scope.row.createdTime) }}</span>
					</template>
					<template #receivedTime="scope">
						<span>{{ $parseTime(scope.row.receivedTime) }}</span>
					</template>
					
					<template #operate="scope">
						<el-button type="primary" size="mini" @click="openDetailsFn(scope.row.id)">详情</el-button>
					</template>
				</global-table>
			</section>
			<footer style="margin-top: 10px;">
				<el-pagination @current-change="currentChange" :current-page.sync="currentPage" :page-size="pageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="totalNum" background>
					>
				</el-pagination>
			</footer>
		</div>
		 <!-- 订单详情 -->
		 <el-dialog :visible.sync="tradeDialog" append-to-body class="sn-default-dialog" width="660px" @close="tradeDialogClose()">
			<div class="sn-title" slot="title">订单详情</div>
			<div v-loading="tradeDetailsLoading">
				<p class="sn-flex">
					<span>收货单名称：</span>
					<span>{{ tradeDetailsInfo.enerpriseName }}</span>
				</p>
				<p class="sn-flex">
					<span>收货单状态：</span>
					<span>{{ tradeDetailsInfo.statusName }}</span>
				</p>
				<p class="sn-flex" v-if="tradeDetailsInfo.itemType === 0">
					<span>收货时间：</span>
					<span>{{ $parseTime(tradeDetailsInfo.receivedTime)}}</span>
				</p>
				<p class="sn-flex">
					<span>创建时间：</span>
					<span>{{  $parseTime(tradeDetailsInfo.createdTime) }}</span>
				</p>
				<global-table :showNumber="false"  :showOperate="false" :loading="itemTableLoading" style="margin-top: 20px;" :pageIndex="itemPage" :pageSize="itemPageSize" :headerData="itemInitData"
					:data="itemTabelData" :isFullScreen="false" :operateW="280">
				</global-table>
				<el-pagination @current-change="itemPageChange" :current-page.sync="itemPage" :page-size="itemPageSize"
					layout="prev, pager, next, jumper" :pager-count="7" class="sn-pagination" hide-on-single-page
					style="text-align: center;" :total="itemTotal" background>
					>
				</el-pagination>
			</div>
		</el-dialog>
		
		<el-dialog
		:visible.sync="enterTradeDialog"
		append-to-body
		:close-on-click-modal="false"
		width="600px"
		class="sn-default-dialog"
		>
		<div class="sn-title" slot="title">录入订单</div>
		<div v-loading="enterTradeLoading" class="enter-trade-list">
			<div class="sn-flex enter-item">
				<p><span class="sn-must-label">客户名称：</span></p>
				<el-select
					v-model="enterTradeInfo.enterpriseId"
					collapse-tags
					filterable
					:remote-method="getFillterShopFn"
					:loading="fillterShopLoading"
					remote
					placeholder="请输入客户名称"
					clearable
					style="width: 300px;"
				>
					<el-option v-for="item in fillterShopList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</div>
			<div class="sn-flex enter-item">
				<p><span class="sn-must-label">收货单名称：</span></p>
				<el-input v-model="enterTradeInfo.name" placeholder="请输入收货单名称" size="normal" clearable style="width: 300px;"></el-input>
			</div>
			<div class="sn-flex enter-item">
				<p><span class="sn-must-label">收货时间：</span></p>
				<el-date-picker v-model="enterTradeInfo.receivedTime" type="datetime"  placeholder="请选择收货时间"  style="width: 300px;"></el-date-picker>
			</div>	
			<p style="text-align:center;margin-bottom: 0;">
				<el-button type="primary" size="medium" class="sn-btn" @click="enterTradeFn()">录入收货单</el-button>
				<el-button size="medium" @click="enterTradeDialog = false">取消</el-button>
			</p>
		</div>
		</el-dialog>
	
	</div>
</template>
  
<script>
import GlobalTable from '@/components/GlobalTable';
import {  GetEnterprisesByPage} from '@/api/enterprise';
import {Get,GetTradeOrderItemsByPage,ChangeTradeStatus,GetTradeByPage,ExploreSearchResultToExcel,AddTrade,ToggleDistributable,GetCustomersPage,GetTradeFromShanNiang,
	GetReceiptNoteDetail,SaveReceiptNote,GetReceiptNotesPageMng
} from '@/api/trade';
import { guid } from '@/utils';
import { GetItemsPage} from '@/api/itemList';

export default {
	components: { GlobalTable },
	data() {
		return {
			plusItemDialog:false,
			tableLoading:false,
			tabelData: [],
			orderStatus:'',
			orderStatusList:[
			{
				value:0,
				label:'已取消',
			},
			{
				value:1,
				label:'待收货',
			},{
				value:2,
				label:'已完成',
			}
		],
			initData: [
				{
					label: '店铺名称',
					value: 'enerpriseName',
					id: guid(),
					width: 200,
				},
				{
					label: '商品种类',
					value: 'itemCategoryCount',
					id: guid(),
					width:100,
				},
				{
					label: '商品数量',
					value: 'itemCount',
					id: guid(),
					width: 100,
				},
				{
					label: '收货日期',
					value: 'receivedTime',
					id: guid(),
					width: 200,
					isCustom:true
				},
				{
					label: '创建时间',
					value: 'createdTime',
					id: guid(),
					width: 200,
					isCustom:true
				},
				{
					label: '订单状态',
					value: 'statusName',
					id: guid(),
				},
			],
			itemPage:1,
			itemPageSize:10,
			itemTableLoading:false,
			itemTabelData:[],
			itemTotal:0,
			itemInitData:[
			{
					label: '商品',
					value: 'itemName',
					id: guid(),
					width: 300,
				},
				{
					label: '规格',
					value: 'specifications',
					id: guid(),
					width: 170,
				},
				{
					label: '数量',
					value: 'quantity',
					id: guid(),
					width: 100,
				},
			],
			pushItemInitData:[
			{
					label: '商品',
					value: 'itemName',
					id: guid(),
					width: 200,
				},
				{
					label: '规格',
					value: 'specifications',
					id: guid(),
					width: 150,
				},
				{
					label: '数量',
					value: 'quantity',
					id: guid(),
					width: 80,
					isCustom:true
				},
			],
			currentPage: 1,
			pageSize: 10,
			totalNum: 0,
			searchValue: '',
			searchItem:'',
			BeginTime:'',
			EndTime:'',
			tradeDetailsLoading:false,
			tradeDialog:false,
			tradeDetailsInfo:{},
			deliveryDialog:false,
			deliveryLoading:false,
			deliveryInfo:{
				status:0,
				enterpriseId:''
			},
			tradeStrogeId:'',
			enterTradeInfo:{
				tradeOrderItems:[]
			},
			enterTradeDialog:false,
			enterTradeLoading:false,
			shopList:[],
			searchShop:'',
			enterTradeInfoItem:{
				quantity:1,
				specifications:''
			},
			itemList:[],
			loading:false,
			fillterShopList:[],
			fillterShopLoading:false,
			fillterShop:'',
		}
	},
	created() {
		this.getDataListFn();
	},
	methods: {
		// 获取筛选店铺数据
		async getFillterShopFn(query){	
			this.fillterShopLoading = true;
			let params = {
				pageIndex: 1,
				pageSize: 1000,
				Name:query,
			}
			const res = await GetEnterprisesByPage(params);
			this.fillterShopLoading = false;
			if(res.code == 200){
				this.fillterShopList = res.data.list;
			}else{
				this.$message.error(res.message);
			}
		},
		async enterTradeFn(){
			if(!this.enterTradeInfo.enterpriseId){
				this.$message.error('订单所属企业不得为空');
				return;
			}
			if(!this.enterTradeInfo.name){
				this.$message.error('订单名称不得为空');
				return;
			}
			if(!this.enterTradeInfo.receivedTime){
				this.$message.error('收货日期不得为空');
				return;
			}
			this.enterTradeLoading = true;
			const res = await SaveReceiptNote(this.enterTradeInfo);
			this.enterTradeLoading = false;
			if(res.code === 200){
				this.$message.success('添加成功');
				this.enterTradeDialog = false;
				this.getDataListFn();
			}else{
				this.$message.error(res.erroMessage);
			}
		},
		closePlusItemDialogFn(){
			this.enterTradeInfoItem = {
				quantity:1
			};
		},
		// 关闭详情弹窗
		tradeDialogClose(){
			this.tradeDetailsInfo = {};
		},
		// 打开订单详情弹窗
		async openDetailsFn(id){
			this.tradeDialog = true;
			this.tradeDetailsLoading = true;
			const res = await GetReceiptNoteDetail({id:id});
			this.tradeDetailsLoading = false;
			if(res.code === 200){
				this.tradeDetailsInfo = res.data;
				this.tradeStrogeId = id;
				this.itemTabelData = res.data.receiptOrders;
				this.itemTotal = res.data.receiptOrders.length;

			}else{
				this.$message.error('获取订单详情失败,错误信息：'+res.erroMessage);
			}
		},
		itemPageChange(val){
			this.itemPage = val;
			this.getItemsByTrade(this.tradeStrogeId);
		},
		currentChange(val) {
			this.currentPage = val;
			this.getDataListFn();
		},
		// 获取订单列表
		async getDataListFn() {
			this.tableLoading = true;
			try {
				let params = {
					pageIndex: this.currentPage,
					pageSize: this.pageSize,
				}
				if(this.searchShop!=='') params.enterpriseId = this.searchShop;
				if(this.orderStatus!=='') params.Status = this.orderStatus;
				if(this.searchValue!== '') params.Name = this.searchValue;
				const res = await GetReceiptNotesPageMng(params);
				this.tableLoading = false;
				if (res.code === 200) {
					this.tabelData = res.data.list;
					this.totalNum = res.data.totalCount;
				} else {
					this.tabelData = [];
					this.$message.error('获取订单列表失败，错误信息：' + res.erroMessage);
				}
			} catch (error) {
				this.tableLoading = false;
				this.$message.error('请求订单列表失败，错误信息：' + error);
			}
			
		},
	}
};
</script>
  
<style lang="scss" scoped>
.trade-contianer {
	box-sizing: border-box;
	padding: 20px;
	background-color: #fff;
	
}
.enter-trade-list{
		.enter-item{
			margin-bottom: 10px;
			>p{
				width: 130px;
				text-align: right;
			}
		}
	}
</style>